<template>
    <div >
        <el-form :model="tenantRegister" ref="tenantRegisterForm" :rules="formRules" v-loading="loading"
                 label-position="left" label-width="100px"
            class="demo-ruleForm login-container">
            <h3 class="title">店铺入驻</h3>
            <el-form-item prop="name" label="名称">
                <el-input type="text" v-model="tenantRegister.tenant.companyName" auto-complete="off"
                    placeholder="请输入店铺名称！"></el-input>
            </el-form-item>
            <el-form-item prop="tel" label="座机">
                <el-input type="text" v-model="tenantRegister.tenant.companyNum" auto-complete="off"
                    placeholder="请输入座机！"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="店铺地址">
                <el-input type="text" v-model="tenantRegister.tenant.address" readonly auto-complete="off" placeholder="请输入地址！"></el-input>
                       <el-button size="small" type="primary" @click="selectAddress">选择</el-button>
            </el-form-item>
            <el-form-item prop="mealId" label="套餐">
                <el-select v-model="tenantRegister.mealId" placeholder="请选择">
                    <el-option
                      v-for="item in meals"
                      :key="item.id"
                      :label="item.mealName"
                      :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="typeId" label="类型">
              <el-select v-model="tenantRegister.typeId" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="logo" label="店铺Logo">
                <el-upload
                    class="upload-demo"
                    action="http://localhost:30010/services/sysmanage/tenant/uploadByCos"
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <!--<el-input type="text" v-model="tenantRegister.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
            </el-form-item>
            <h3 class="title">管理员信息设置</h3>
            <el-form-item prop="admin.username" label="账号">
                <el-input type="text" v-model="tenantRegister.admin.username" auto-complete="off" placeholder="请输入账号！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.phone" label="手机号码">
                <el-input type="text" v-model="tenantRegister.admin.tel" auto-complete="off" placeholder="请输入电话！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.email" label="电子邮件">
                <el-input type="text" v-model="tenantRegister.admin.email" auto-complete="off" placeholder="请输入邮件！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.password" label="密码">
                <el-input type="password" v-model="tenantRegister.admin.password" auto-complete="off"
                    placeholder="请输入密码！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.confirmPassword" label="确认密码">
                <el-input type="password" v-model="tenantRegister.admin.confirmPassword" auto-complete="off"
                    placeholder="请输入确认密码！"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="settledIn">入驻</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="选择地址" :visible.sync="dialogVisable" width="30%">
            <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
                <bm-view class="map"></bm-view>
                <bm-control :offset="{width: '10px', height: '10px'}">
                    <!--:sugStyle="{zIndex: 2100} 让搜索提示上浮-->
                    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 2100}">
                        <div style="margin-bottom:10px">
                            <input id="searchInput" type="text" placeholder="请输入关键字" class="searchinput" />
                            <el-button type="success" @click="selectAddressConfirm">确定</el-button>
                        </div>
                    </bm-auto-complete>
                </bm-control>
                <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
            </baidu-map>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisable=false">取 消</el-button>
                <el-button type="primary" @click="dialogVisable=false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
import mealApi from '@/api/sys/meal'
import tenantApi from '@/api/sys/tenant'
import tenantTypeApi from "@/api/sys/tenantType";

Vue.use(BaiduMap, {
    ak: '0LmUUvHn9GN00RdUj4Qseo5niWygzCy5'
    })
    export default {
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.tenantRegister.admin.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
              meals: [],
              types:[],
              keyword: '',
              dialogVisable: false,
              fileList: [],
              tenantRegister: {
                admin: {
                    username: null,
                    tel: null,
                    email: null,
                    password: null,
                    confirmPassword: null
                },
                tenant: {
                    companyName: null,
                    companyNum: null,
                    address: null,
                    logo: null
                },
                mealId: null,
                typeId: null
              },
              loading:false,
              formRules: {
                'tenant.companyName': [
                    { required: true, message: '请输入店铺名称!', trigger: 'blur' }
                ],
                'tenant.companyNum': [
                    { required: true, message: '请输入店铺座机!', trigger: 'blur' }
                ],
                'tenant.address': [
                    { required: true, message: '请输入店铺地址!', trigger: 'blur' }
                ],
                'admin.tel': [
                    { required: true, message: '请输入手机号!', trigger: 'blur' }
                ],
                'admin.email': [
                    { type: 'email', required: true, message: '请输入邮箱!', trigger: 'blur' }
                ],
                'admin.username': [
                    { required: true, message: '请输入账号!', trigger: 'blur' }
                ],
                'admin.password': [
                    { required: true, message: '请输入密码!', trigger: 'blur' }
                ],
                'admin.confirmPassword': [
                    { required: true, validator: validatePass2, trigger: 'blur' } //自定义校验规则
                ]
              }
            };
        },
        create(){
        },
        methods: {
            getMeals() {
                mealApi.getAllMeal()
                    .then(response => {
                        this.meals = response.data.resultObj
                    })
            },
            //获取所有租户类型
            getAllTenantType(){
              tenantTypeApi.getAllList()
                .then(response => {
                  this.types = response.data.resultObj
                })
            },
            selectAddressConfirm() {
                //获取值搜索框值,设置给地址
                this.tenantRegister.tenant.address = document.getElementById("searchInput").value;
                //关闭对话框
                this.dialogVisable = false;
            },
            selectAddress() {
                this.dialogVisable = true;
            },
            //文件上传成功的回调
            handleSuccess(response,file,fileList){
              this.tenantRegister.tenant.logo = response.resultObj
              this.$message({message: 'logo上传成功，图片地址：'+response.resultObj, type: 'success' });
            },
            //文件删除
            handleRemove(file, fileList) {
              var path = file.response.resultObj
              tenantApi.delete(path)
                .then(response => {
                  this.$message({message: '文件删除成功！', type: 'success' });
                  this.tenantRegister.tenant.logo = ""
                }).catch(response => {
                this.$message({message: '文件删除失败！', type: 'error' });
              })
            },
            //图片预览
            handlePreview(file) {
                // console.log(file);
            },
            beforeUpload(file){
                const type = file.type
                const size = file.size
                if(!(type === 'image/jpg' || type === 'image/jpeg' || type === 'image/png')){
                    this.$message.error('上传头像图片只能是 PNG,JPG,JPEG 格式!')
                    return false;
                }else if(size/1024/1024 > 5){
                    this.$message.error('上传头像图片大小不能超过 5MB!')
                    return false;
                }
            },
            //提交入驻
            settledIn() {
                this.$refs.tenantRegisterForm.validate((valid) => {
                    //校验表单成功后才做一下操作
                    if (valid) {
                        this.$confirm('确认入驻吗？', '提示', {}).then(() => {
                          let para = Object.assign({}, this.tenantRegister);
                          this.loading = true
                          tenantApi.settlement(para)
                            .then(response => {
                              this.$message.success("入驻成功!");
                              this.loading = false
                              //重置表单
                              this.$refs['tenantRegisterForm'].resetFields();
                              //跳转登录页面
                              this.$router.push({ path: '/' });
                            }).catch(response => {
                              this.$message.error("入驻失败!");
                              this.loading = false
                            })
                        }).catch(res => {this.$message.info("已取消入驻！")});
                    }
                })
            }
        },
        mounted() {
          this.getMeals();
          this.getAllTenantType();
        }
    }

</script>
<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 0 auto;
  width: 500px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }
}

.map {
  width: 100%;
  height: 300px;
}

.searchinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}
</style>
